<template>
  <div class="product-manage">
    <!-- 查询区域 -->
    <el-form :inline="true" :model="searchForm" class="search-form" @submit.prevent>
      <el-form-item label="产品编号">
        <el-input v-model="searchForm.productId" placeholder="请输入产品编号" clearable />
      </el-form-item>
      <el-form-item label="产品名称">
        <el-input v-model="searchForm.productName" placeholder="请输入产品名称" clearable />
      </el-form-item>
      <el-form-item label="批次">
        <el-input v-model="searchForm.batch" placeholder="请输入批次" clearable />
      </el-form-item>
      <el-form-item label="外观尺寸">
        <el-input v-model="searchForm.appearanceSize" placeholder="请输入外观尺寸" clearable />
      </el-form-item>
      <el-form-item label="操作员">
        <el-input v-model="searchForm.operator" placeholder="请输入操作员" clearable />
      </el-form-item>
      <el-form-item label="工艺方法">
        <el-input v-model="searchForm.processMethod" placeholder="请输入工艺方法" clearable />
      </el-form-item>
      <el-form-item label="加工时间">
        <el-date-picker
          v-model="searchForm.processTimeRange"
          type="daterange"
          range-separator="-"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          value-format="YYYY-MM-DD"
        />
      </el-form-item>
      <el-form-item label="表面车间">
        <el-input v-model="searchForm.surfaceWorkshop" placeholder="请输入表面车间" clearable />
      </el-form-item>
      <el-form-item label="锻造车间">
        <el-input v-model="searchForm.forgingWorkshop" placeholder="请输入锻造车间" clearable />
      </el-form-item>
      <el-form-item label="装配车间">
        <el-input v-model="searchForm.assemblyWorkshop" placeholder="请输入装配车间" clearable />
      </el-form-item>
      <el-form-item label="质检">
        <el-input v-model="searchForm.qualityInspection" placeholder="请输入质检" clearable />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSearch">查询</el-button>
        <el-button @click="resetSearch">重置</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="success" @click="showAddDialog = true">添加产品</el-button>
      </el-form-item>
    </el-form>

    <!-- 产品列表 -->
    <el-table :data="productList" border>
      <el-table-column prop="productId" label="产品编号" min-width="100" />
      <el-table-column prop="productName" label="产品名称" min-width="120" />
      <el-table-column prop="appearanceSize" label="外观尺寸" min-width="100" />
      <el-table-column prop="batch" label="批次" min-width="90" />
      <el-table-column prop="operator" label="操作员" min-width="100" />
      <el-table-column prop="processMethod" label="工艺方法" min-width="110" />
      <el-table-column prop="processTime" label="加工时间" min-width="140" :formatter="formatDate" />
      <el-table-column prop="surfaceWorkshop" label="表面车间" min-width="90" />
      <el-table-column prop="forgingWorkshop" label="锻造车间" min-width="90" />
      <el-table-column prop="assemblyWorkshop" label="装配车间" min-width="90" />
      <el-table-column prop="qualityInspection" label="质检" min-width="80" />
      <el-table-column label="操作" min-width="220">
        <template #default="{ row }">
          <el-button size="small" type="primary" @click="handleEditProduct(row)">修改</el-button>
          <el-button size="small" type="danger" @click="handleDeleteProduct(row.productId)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      background
      layout="prev, pager, next, jumper, ->, total"
      :total="pagination.total"
      :page-size="pagination.size"
      :current-page="pagination.current"
      @current-change="handlePageChange"
    />

    <!-- 添加产品对话框 -->
    <el-dialog title="添加产品" v-model="showAddDialog"">
      <el-form :model="addForm" label-width="100px">
        <el-form-item label="产品名称">
          <el-input v-model="addForm.productName" />
        </el-form-item>
        <el-form-item label="外观尺寸">
          <el-input v-model="addForm.appearanceSize" />
        </el-form-item>
        <el-form-item label="批次">
          <el-input v-model="addForm.batch" />
        </el-form-item>
        <el-form-item label="操作员">
          <el-input v-model="addForm.operator" />
        </el-form-item>
        <el-form-item label="工艺方法">
          <el-input v-model="addForm.processMethod" />
        </el-form-item>
        <el-form-item label="工艺时间">
          <el-date-picker v-model="addForm.processTime" type="date" placeholder="选择日期" />
        </el-form-item>
        <el-form-item label="表面车间">
          <el-input v-model="addForm.surfaceWorkshop" />
        </el-form-item>
        <el-form-item label="锻造车间">
          <el-input v-model="addForm.forgingWorkshop" />
        </el-form-item>
        <el-form-item label="装配车间">
          <el-input v-model="addForm.assemblyWorkshop" />
        </el-form-item>
        <el-form-item label="质检">
          <el-input v-model="addForm.qualityInspection" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showAddDialog = false; editProductId.value = null">取消</el-button>
        <el-button type="primary" @click="handleAddProduct">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import axios from 'axios';


const searchForm = reactive({
  productId: '',
  productName: '',
  appearanceSize: '',
  batch: '',
  operator: '',
  processMethod: '',
  processTimeRange: [],
  surfaceWorkshop: '',
  forgingWorkshop: '',
  assemblyWorkshop: '',
  qualityInspection: ''
})

const addForm = reactive({
  productName: '',
  appearanceSize: '',
  batch: '',
  operator: '',
  processMethod: '',
  processTime: '',
  surfaceWorkshop: '',
  forgingWorkshop: '',
  assemblyWorkshop: '',
  qualityInspection: ''
})

const productList = ref([])
const pagination = reactive({
  total: 0,
  size: 10,
  current: 1
})
const showAddDialog = ref(false)
const editProductId = ref(null)

const handleEditProduct = (row: any) => {
  Object.assign(addForm, row)
  editProductId.value = row.productId
  showAddDialog.value = true
}

const handleDeleteProduct = async (productId: number) => {
  try {
    await axios.delete(import.meta.env.VITE_API_URL + `product/${productId}`)
    ElMessage.success('删除成功')
    fetchProducts(1)
  } catch (e) {
    ElMessage.error('删除失败')
  }
}

const formatDate = (row: any) => {
  return new Date(row.processTime).toLocaleDateString('zh-CN', { month: '2-digit', day: '2-digit' }).replace('/', '-')
}

const fetchProducts = async (pageNum = 1) => {
  try {
    const params = {
      productId: searchForm.productId || null,
      productName: searchForm.productName || null,
      appearanceSize: searchForm.appearanceSize || null,
      batch: searchForm.batch || null,
      operator: searchForm.operator || null,
      processMethod: searchForm.processMethod || null,
      processBeginTime: searchForm.processTimeRange?.[0] || null,
      processEndTime: searchForm.processTimeRange?.[1] || null,
      surfaceWorkshop: searchForm.surfaceWorkshop || null,
      forgingWorkshop: searchForm.forgingWorkshop || null,
      assemblyWorkshop: searchForm.assemblyWorkshop || null,
      qualityInspection: searchForm.qualityInspection || null
    }
    const res = await axios.post(
       import.meta.env.VITE_API_URL + `product/page?pageNum=${pageNum}&pageSize=${pagination.size}`,
      params
    )
    productList.value = res.data.records
    pagination.total = res.data.total
    pagination.current = res.data.current
    pagination.size = res.data.size
  } catch (e) {
    ElMessage.error('获取产品数据失败')
  }
}

const handleSearch = () => {
  fetchProducts(1)
}
const resetSearch = () => {
  searchForm.productId = ''
  searchForm.productName = ''
  searchForm.appearanceSize = ''
  searchForm.batch = ''
  searchForm.operator = ''
  searchForm.processMethod = ''
  searchForm.processTimeRange = []
  searchForm.surfaceWorkshop = ''
  searchForm.forgingWorkshop = ''
  searchForm.assemblyWorkshop = ''
  searchForm.qualityInspection = ''
  fetchProducts(1)
  editProductId.value = null
}
const handlePageChange = (page: number) => {
  fetchProducts(page)
}

const handleAddProduct = async () => {
  try {
    await axios.post(
      import.meta.env.VITE_API_URL + 'product/save',
      {
        productName: addForm.productName,
        appearanceSize: addForm.appearanceSize,
        batch: addForm.batch,
        operator: addForm.operator,
        processMethod: addForm.processMethod,
        processTime: addForm.processTime,
        surfaceWorkshop: addForm.surfaceWorkshop,
        forgingWorkshop: addForm.forgingWorkshop,
        assemblyWorkshop: addForm.assemblyWorkshop,
        qualityInspection: addForm.qualityInspection
      }
    )
    showAddDialog.value = false
    await fetchProducts(1)
  } catch (e) {
    // 可根据需要添加错误提示
    console.error('添加产品失败', e)
  }
}

onMounted(() => {
  fetchProducts(1)
})
</script>

<style scoped>
@import '@/styles/views.css';
</style>

  